<template>
  <div id="edit-container" class="edit-container">
    <div class="logo"></div>
    <div class="edit-form">
      <div class="button-box">
        <div class="label">用户名</div>
        <input v-model="user.account" />
      </div>
      <div class="button-box">
        <div class="label">密码</div>
        <input v-model="user.oldPassword" type="password" />
      </div>
      <div class="button-box">
        <div class="label">新密码</div>
        <input v-model="user.newPassword" type="password" />
      </div>
      <button class="edit-btn" @click="submit">确定</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import { editPwd } from "@/api/index";
const userInfo = uni.getStorageSync("userInfo");

const user = reactive({
  account: userInfo.account,
  oldPassword: "",
  newPassword: "",
});
var height = window.innerHeight;

window.onresize = function () {
  let c: any = document.getElementById("edit-container");
  if (c) {
    c.style.height = height + "px";
  }
};
const submit = async () => {
  let data: any = await editPwd(user);
  if (data.data) {
    uni.removeStorageSync("userInfo");
    uni.navigateTo({ url: "/pages/login/login" });
  }
};
</script>
<style lang="scss" scoped>
.edit-container {
  width: 100%;
  height: 100vh;
  background: url("../../static/edit-bg.png");
  background-size: 100% 100%;
  position: absolute;
  background-repeat: no-repeat;
}
.logo {
  position: absolute;
  width: 150rpx;
  height: 140rpx;
  left: 300rpx;
  top: 580rpx;
  background: url("../../static/logo.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.edit-form {
  position: absolute;
  top: 740rpx;
  color: white;
  width: 100%;
  padding: 40rpx;
}
.button-box {
  display: flex;
  margin-top: 20rpx;
  width: 100%;
  height: 94rpx;
  line-height: 94rpx;
  padding: 0 20rpx;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.23);
  .label {
    width: 100rpx;
    color: rgba(255, 255, 255, 1);
  }
  input {
    margin-left: 15rpx;
    width: 100%;
    height: 100%;
  }
}
.edit-btn {
  width: 670rpx;
  height: 96rpx;
  color: rgba(237, 237, 237, 1);
  margin-top: 20rpx;
  border-radius: 48rpx;
  background: rgba(38, 97, 221, 1);
}
.register {
  margin-top: 10rpx;
  width: 100%;
  text-align: center;
}
</style>
